<template>
  <!-- 弹窗遮罩 -->
  <div 
    class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm"
    @click="$emit('back')"
  >
    <!-- 弹窗内容 -->
    <div 
      class="fixed inset-4 md:inset-8 lg:inset-16 bg-dark-bg rounded-xl overflow-hidden flex flex-col"
      @click.stop
    >
      <!-- 返回导航 -->
      <div class="flex-shrink-0 bg-dark-bg border-b border-dark-border">
        <div class="px-4 sm:px-6 lg:px-8">
          <div class="flex items-center justify-between h-16">
            <button 
              @click="$emit('back')"
              class="flex items-center space-x-2 text-dark-muted hover:text-trae-green transition-colors duration-300"
            >
              <ArrowLeft class="w-5 h-5" />
              <span>返回首页</span>
            </button>
            
            <div class="text-sm text-dark-muted">
              {{ getCategoryName(project.category) }} · {{ project.year }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- 可滚动内容区域 -->
      <div class="flex-1 overflow-y-auto">
        <div class="px-4 sm:px-6 lg:px-8 py-8">
          <!-- 项目概览 -->
          <div class="grid lg:grid-cols-3 gap-8 mb-12">
            <!-- 左侧：项目信息 -->
            <div class="lg:col-span-2">
              <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">
                {{ project.title }}
              </h1>
              
              <p class="text-lg text-dark-muted mb-6 leading-relaxed">
                {{ project.description }}
              </p>
              
              <div class="grid sm:grid-cols-2 gap-4 mb-6">
                <div class="bg-dark-secondary p-4 rounded-lg">
                  <h3 class="text-sm font-medium text-dark-muted mb-1">开发周期</h3>
                  <p class="text-lg font-semibold text-dark-text">{{ project.duration }}</p>
                </div>
                
                <div class="bg-dark-secondary p-4 rounded-lg">
                  <h3 class="text-sm font-medium text-dark-muted mb-1">项目年份</h3>
                  <p class="text-lg font-semibold text-dark-text">{{ project.year }}</p>
                </div>
              </div>
            </div>
            
            <!-- 右侧：技术栈 -->
            <div class="lg:col-span-1">
              <div class="bg-dark-secondary p-6 rounded-xl">
                <h3 class="text-xl font-bold text-dark-text mb-4">技术栈</h3>
                <div class="flex flex-wrap gap-3">
                  <span 
                    v-for="tech in project.technologies" 
                    :key="tech"
                    class="bg-accent-blue/10 text-accent-blue px-3 py-2 rounded-lg text-sm font-medium border border-accent-blue/20"
                  >
                    {{ tech }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 项目展示 -->
          <div class="mb-12">
            <!-- 轮播模式 -->
            <div v-if="project.displayMode === 'carousel'" class="space-y-8">
              <!-- 图片轮播 -->
              <div class="relative">
                <div class="relative h-96 md:h-[500px] rounded-xl overflow-hidden bg-dark-secondary">
                  <img 
                    :src="project.images[currentImageIndex]" 
                    :alt="`${project.title} - 图片 ${currentImageIndex + 1}`"
                    class="w-full h-full object-cover transition-opacity duration-500"
                    loading="lazy"
                  />
                  
                  <!-- 轮播控制 -->
                  <button 
                    v-if="project.images.length > 1"
                    @click="previousImage"
                    class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-dark-bg/80 hover:bg-dark-bg text-dark-text p-2 rounded-full transition-all duration-300"
                  >
                    <ChevronLeft class="w-6 h-6" />
                  </button>
                  
                  <button 
                    v-if="project.images.length > 1"
                    @click="nextImage"
                    class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-dark-bg/80 hover:bg-dark-bg text-dark-text p-2 rounded-full transition-all duration-300"
                  >
                    <ChevronRight class="w-6 h-6" />
                  </button>
                  
                  <!-- 指示器 -->
                  <div v-if="project.images.length > 1" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                    <button 
                      v-for="(_, index) in project.images" 
                      :key="index"
                      @click="currentImageIndex = index"
                      class="w-3 h-3 rounded-full transition-all duration-300"
                      :class="index === currentImageIndex ? 'bg-trae-green' : 'bg-dark-muted'"
                    />
                  </div>
                </div>
              </div>
              
              <!-- 项目说明 -->
              <div class="bg-dark-secondary p-8 rounded-xl">
                <h3 class="text-2xl font-bold text-dark-text mb-4">项目亮点</h3>
                <div class="prose prose-invert max-w-none">
                  <p class="text-dark-muted leading-relaxed">
                    {{ getProjectHighlights(project) }}
                  </p>
                </div>
              </div>
            </div>
            
            <!-- 长图模式 -->
            <div v-else class="space-y-6">
              <!-- 垂直图片展示 -->
              <div class="space-y-6">
                <div 
                  v-for="(image, index) in project.images" 
                  :key="index"
                  class="rounded-xl overflow-hidden bg-dark-secondary"
                >
                  <img 
                    :src="image" 
                    :alt="`${project.title} - 截图 ${index + 1}`"
                    class="w-full h-auto object-cover"
                    loading="lazy"
                  />
                </div>
              </div>
              
              <!-- 底部项目说明 -->
              <div class="bg-dark-secondary p-8 rounded-xl">
                <h3 class="text-2xl font-bold text-dark-text mb-4">项目详情</h3>
                <div class="prose prose-invert max-w-none">
                  <p class="text-dark-muted leading-relaxed">
                    {{ getProjectDetails(project) }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-vue-next'
import type { Project } from '@/data/projects'
import { getCategoryName } from '@/data/projects'

interface Props {
  project: Project
}

const props = defineProps<Props>()
const emit = defineEmits<{
  back: []
}>()

// ESC 键关闭弹窗
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    emit('back')
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})

const currentImageIndex = ref(0)

const nextImage = () => {
  currentImageIndex.value = (currentImageIndex.value + 1) % props.project.images.length
}

const previousImage = () => {
  currentImageIndex.value = currentImageIndex.value === 0 
    ? props.project.images.length - 1 
    : currentImageIndex.value - 1
}

const getProjectHighlights = (project: Project): string => {
  const highlights = {
    '1': '这款环保追踪应用采用了先进的数据可视化技术，帮助用户直观地了解自己的碳足迹。通过社交分享功能，用户可以与朋友一起参与环保行动，形成良性的环保社区。应用还集成了AI算法，为用户提供个性化的环保建议。',
    '2': '企业管理平台采用微服务架构，支持高并发访问和数据处理。平台集成了先进的项目管理工具，支持敏捷开发流程，帮助团队提高协作效率。同时，平台还提供了丰富的数据分析功能，帮助企业做出更好的决策。',
    '3': '虚拟艺术展览平台利用WebGL和Three.js技术，为用户提供沉浸式的3D展览体验。平台支持高清艺术品展示，用户可以360度欣赏艺术作品。同时，平台还集成了在线支付系统，为艺术家提供便捷的销售渠道。',
    '4': '健身追踪应用采用了机器学习算法，为用户提供个性化的训练计划和营养建议。应用支持多种运动模式的追踪，包括跑步、骑行、游泳等。通过社区功能，用户可以与其他健身爱好者分享经验，互相激励。'
  }
  return highlights[project.id as keyof typeof highlights] || '这是一个优秀的项目，展示了我们团队的专业技术能力和创新思维。'
}

const getProjectDetails = (project: Project): string => {
  const details = {
    '2': 'CloudSync企业管理平台是一个全面的企业级解决方案，旨在帮助中小企业实现数字化转型。平台采用现代化的技术栈，包括Vue 3、TypeScript和Node.js，确保了系统的稳定性和可扩展性。平台的核心功能包括项目管理、任务分配、团队协作、文档共享和数据分析等。通过直观的用户界面和强大的功能，企业可以更好地管理项目进度，提高团队协作效率，并通过数据分析获得业务洞察。',
    '4': 'FitnessPro健身追踪应用是一款专业的健康管理工具，集成了先进的AI技术和丰富的健身功能。应用支持多种运动模式的自动识别和追踪，包括跑步、骑行、游泳、力量训练等。通过机器学习算法，应用可以分析用户的运动数据，提供个性化的训练建议和营养指导。社区功能让用户可以与其他健身爱好者互动，分享成就，参与挑战，形成积极的健身氛围。应用还支持与各种健身设备的连接，确保数据的准确性和完整性。'
  }
  return details[project.id as keyof typeof details] || '这个项目展示了我们在相关领域的专业能力和丰富经验，为客户提供了高质量的解决方案。'
}
</script>